<style lang="scss" scoped>
#nav{
    width:100%;
    height: 50px;
    background:rgba(3, 121, 169, 1);
    .nav-row{
        width:100%;
        height: 50px;
        font-size:0px;
        letter-spacing: -3px;
        .nav-col{
            height:50px;
            display: inline-block;
            &.nav-col-first{
                width:210px !important;
            }
            &.nav-col-menu{
                width:calc(100% - 220px);
                li{
                    font-size:14px;
                    color:#fff;
                    line-height:50px;
                    padding:0 45px;
                    float: left;
                    cursor: pointer;
                    letter-spacing: 0px;
                    &:hover{
                        background:rgb(2,88,125);
                    }
                }
                .isActive{
                    background:rgb(2,88,125);
                }
            }
        }
    }
}
</style>
<template>
    <div id="nav">
        <div class="nav-row">
            <div class="nav-col nav-col-first"></div>
            <ul class="nav-col nav-col-menu">
                <!-- <li @click="goHome">首页</li> -->
                <li @click="goBasic" :class="searchType == '1' ? 'isActive' : ''">药物基本信息</li>
                <li @click="goInstructions" :class="searchType == '2' ? 'isActive' : ''">药物说明书</li>
                <li @click="goGenomics" :class="searchType == '3' ? 'isActive' : ''">药物基因组学</li>
                <li @click="goInteraction" :class="searchType == '4' ? 'isActive' : ''">药物相互作用</li>
                <li @click="goClinicalTrial" :class="searchType == '5' ? 'isActive' : ''">临床试验</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'nav',
    data(){
        return{
            searchType : ""
        }
    },
    methods:{
        goHome(){
            this.$store.state.searchType = "";
           this.$router.push("/home");
        },
        goBasic(){
            this.$store.state.searchType = 1;
            this.$router.push("/basic");
        },
        goInstructions(){
            this.$store.state.searchType = 2;
            this.$router.push("/instructions");
        },
        goGenomics(){
            this.$store.state.searchType = 3;
            this.$router.push("/genomics");
        },
        goInteraction(){
            this.$store.state.searchType = 4;
            this.$router.push("/interaction");
        },
        goClinicalTrial(){
            this.$store.state.searchType = 5;
            this.$router.push("/clinicalTrial");
        }
    },
    watch:{
        "$store.state.searchType":function(val){
            this.searchType = val;
        }
    },
    created() {
        this.searchType = this.$store.state.searchType;
        var searchId = sessionStorage.getItem("searchId");
        this.$store.state.searchId = searchId;
    },
    
}
</script>


